<template>
	<div>
		<carHeader :title="'活动发布'"></carHeader>
		<u-popup :show="open" mode="center" :round="10">
			<view class="popup">
				<view class="text">
					<text>您确定要执行这样的操作吗?</text>
				</view>
				<view class="button">
					<u-button class="btn1" @click="cancel()">取消</u-button>
					<u-button class="btn2" @click="submitBtn(item)">确认</u-button>
				</view>

			</view>
		</u-popup>
		<div class="zong">
			<div class="head">
				<!-- <div class="body" :class="{'body':true,'bodyheight':activeIndex===0}"> -->
				<div class="body">
					<div class="body1">
						<div class="bodyhead">
							<div class="son1">
								<div class="son11" :class="{ 'item': true, 'active': activeIndex === 0}"
									@click="changeColor()">
									<span>已上架</span>
								</div>
								<div class="son12" :class="{ 'item': true, 'active': activeIndex === 1 }"
									@click="changeColor1()">
									<span>未上架</span>
								</div>
							</div>
						</div>

						<div v-if="activeIndex===0" v-for="(item,index) in ysList" :key="index">
							<div class="bodyhead22">
								<p>{{item.mesTitle}}</p>
								<p style="color: #bbbbbb;">{{item.mesTime}}</p>
								<button type="primary" class="sonson1" @click="xjan(item.mesId)">下架</button>
							</div>
						</div>

						<div v-if="activeIndex===1" v-for="(item,index) in wsList">
							<div class="bodyhead2">
								<p>{{item.mesTitle}}</p>
								<p>
									<span
										:class="{'color1': item.mesAudit === '0','color2': item.mesAudit === '1','color3': item.mesAudit === '2'}">{{itemText(item.mesAudit)}}</span>
									<button type="primary" class="sonson2" @click="sjan(item.mesId,item.mesAudit)">
										{{ buttonLabel(item.mesAudit) }}
									</button>
								</p>
								<p style="color:#bbbbbb;position: relative;top: -30px;">{{item.mesTime}}</p>
							</div>
						</div>

					</div>
				</div>
				<navigator url="/pages/announceActivity/announceActivity">
					<button type="primary" class="hail">+发布活动</button>
				</navigator>

			</div>

		</div>


	</div>
</template>

<script>
	import index from '../../uni_modules/uview-ui';
	export default {
		data() {
			return {
				open: false,
				index: 0,
				activeIndex: 0,
				ysList: [],
				wsList: [],
				mesId: '',
				mesAudit: ''


			}
		},
		onShow() {
			this.searchysList();

		},
		methods: {
			changeColor() {
				this.activeIndex = 0;
				this.searchysList();

			},
			changeColor1() {
				this.activeIndex = 1;
				this.searchysList2();
			},

			searchysList() {
				console.log('获取上架列表');
				const that = this;
				uni.request({
					url: 'http://localhost:8080/carShopService/message/list',
					data: {
						mesState: 0,
					},

					success(res) {
						console.log(res.data.rows);
						console.log('数据如上获取成功');
						that.ysList = res.data.rows;
						console.log(that.ysList);
					}
				})
			},
			searchysList2() {
				console.log('获取下架列表');
				const that = this;
				uni.request({
					url: 'http://localhost:8080/carShopService/message/list',
					data: {
						mesState: 1,
					},

					success(res) {
						console.log(res.data.rows);
						console.log('数据如上获取成功');
						that.wsList = res.data.rows;
						console.log(that.wsList);
					}
				})
			},
			itemClasses(mesAudit) {
				return {
					'color1': mesAudit === '0',
					'color2': mesAudit === '1',
					'color3': mesAudit === '2'
				};
			},
			itemText(mesAudit) {
				switch (mesAudit) {
					case '0':
						return '审核成功';
					case '1':
						return '审核失败';
					case '2':
						return '审核中';
					default:
						return '';
				}
			},
			buttonLabel(mesAudit) {
				if (mesAudit == 0) {
					return '上架';
				} else {
					return '删除';
				}
			},
			xjan(id) {
				console.log("111");
				this.mesId = id;
				console.log(this.mesId)
				uni.request({
					url: 'http://localhost:8080/carShopService/message',
					method: 'Put',
					data: {
						mesId: this.mesId,
						mesState: 1
					},
					success: (res) => {

						console.log("222");
						this.searchysList();
					}
				})
			},
			sjan(id, mesAudit) {
				this.mesId = id;
				this.mesAudit = mesAudit
				if (this.mesAudit == '0') {
					uni.request({
						url: 'http://localhost:8080/carShopService/message',
						method: 'Put',
						data: {
							mesId: this.mesId,
							mesState: 0
						},
						success: (res) => {

							console.log("222");
							this.searchysList2();
						}
					})
				} else {
					uni.request({
						url: 'http://localhost:8080/carShopService/message/' +
							id,
						method: 'DELETE',

						success: (res) => {
							console.log("删除了");
							this.searchysList2();
						}
					})
				}

			},
		},

		computed: {

		}
	}
</script>

<style>
	.color1 {
		color: red;
		/* 或者其他颜色 */
	}

	.color2 {
		color: #51CB81;
		/* 或者其他颜色 */
	}

	.color3 {
		color: #bbbbbb;
		/* 或者其他颜色 */
	}


	* {
		margin: 0;
		padding: 0;
	}

	.zong {
		height: 1300rpx;
		width: 100%;
		background-color: #eeeeee;
		position: relative;
		float: left;
		top: -130px;
	}

	.head {
		height: 340rpx;
		background-color: #2276FF;
		padding-top: 10px;

	}

	.body {
		display: flex;
		background-color: #ffffff;
		/* height: 950rpx; */
		width: 700rpx;
		margin: 0 auto;
		border-radius: 20px;

	}

	.body.bodyheight {
		display: flex;
		height: 530rpx;
		/* 	height: listheight+'px'; */
	}

	.body1 {
		margin: 0 auto;
		/* 	background-color: aquamarine; */
		width: 650rpx;
		/* 	height: 710rpx; */
	}

	.bodyhead {
		height: 125rpx;
		/* 	background-color: aliceblue; */
		border-bottom: 3px solid #eeeeee;
		padding-top: 25px;

	}

	.bodyhead2 {
		height: 230rpx;
		border-bottom: 2px solid #eeeeee;

	}

	.bodyhead22 {
		height: 140rpx;
		border-bottom: 2px solid #eeeeee;

	}

	.bodyhead3 {
		height: 230rpx;
		border-bottom: 2px solid #eeeeee;

	}

	.bodyhead33 {
		height: 140rpx;

	}

	.son1 {
		height: 40px;
		margin: 0 auto;
		width: 150px;
		background-color: pink;
		/* padding-top: 10px; */
		border-radius: 30px;
		text-align: center;
		line-height: 40px;
		border: 1px solid #eeeeee;
		/* margin-top: 10px; */
	}

	.son11 {
		float: left;
		height: 40px;
		width: 75px;
		background-color: #eeeeee;
		color: #009AFF;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}

	.son12 {
		float: left;
		height: 40px;
		width: 75px;
		background-color: #009AFF;
		color: #eeeeee;
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.item {
		color: #2276FF;
		background-color: #eeeeee;
		font-size: 16px;
	}

	.item.active {
		color: #eeeeee;
		background-color: #2276FF;
	}

	p {
		margin-top: 15px;
	}

	.sonson {
		margin-left: 200px;

		background-color: #009AFF;

		padding: 5px 20px 5px 20px;
		border-radius: 20px;

	}

	.sonson1 {
		/* margin-left: 200px; */
		background-color: #2276FF;
		border-radius: 20px;
		position: relative;
		font-size: 16px;
		line-height: 60rpx;
		width: 160rpx;
		height: 60rpx;
		left: 110px;
		top: -25px;

	}

	.sonson2 {
		/* margin-left: 200px; */
		background-color: #2276FF;
		border-radius: 20px;
		/* 	position: relative; */
		font-size: 16px;
		line-height: 60rpx;
		width: 160rpx;
		height: 60rpx;
		left: 110px;
		top: -25px;

	}

	.bodyhead3 .sonson {
		margin-left: 180px;
	}

	.hail {
		height: 40px;
		width: 250px;
		background-color: #2276FF;
		margin: 20px 0px 20px 62px;
		border-radius: 20px;
		/* text-align: center; */
		line-height: 40px;
		font-size: 18px;
		/* color: #ffffff; */
		/* position: fixed; */
	}
</style>